<#assign base = request.contextPath />
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <base id="base" href="${base}">
    <link href="${base}/css/main.css" rel="stylesheet">

    <script src="${base}/js/echarts.js"></script>
    <script src="${base}/js/jquery.js"></script>


</head>

<body>

<form name="parkReport">
   <table>
    <tr>
        <td colspan="2">
             <select id="park">
                 <option value="1">停车场测试数据1</option>
                 <option value="2">停车场测试数据2</option>
                 <option value="3">停车场测试数据3</option>
                 <option value="4">停车场测试数据4</option>
                 <option value="5">停车场测试数据5</option>
             </select>
         </td>
    </tr>
       <tr>
           <td>
               <select id="queryType">
                   <option value="1">当天</option>
                   <option value="2">跨天</option>
               </select>
           </td>
       </tr>
       <tr>
           <td>
               <select id="startDate">
                   <option value="2017-07-17">07-17</option>
                   <option value="2017-07-18">07-18</option>
                   <option value="2017-07-19">07-19</option>
                   <option value="2017-07-20">07-20</option>
                   <option value="2017-07-21">07-21</option>
               </select>
           </td>
           <td>
               <select id="endDate">
                   <option value="2017-07-17">07-17</option>
                   <option value="2017-07-18">07-18</option>
                   <option value="2017-07-19">07-19</option>
                   <option value="2017-07-20">07-20</option>
                   <option value="2017-07-21">07-21</option>
               </select>
           </td>
       </tr>
       <tr>
           <td colspan="2">
           <select id="duration">
               <option value="0.5">0.5</option>
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
           </select>
           </td>
       </tr>
       <tr>
           <td colspan="2">
               <input type="button" value="查询" onclick="queryReport()"></input>
           </td>
       </tr>
   </table>

</form>

</br>
</br>
</br>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width:1800px;height:600px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    function queryReport() {
        var parkId = $("#park").val();
        var startDate = $("#startDate").val();
        var endDate = $("#endDate").val();
        var duration = $("#duration").val();
        var queryType = $("#queryType").val();

        $.ajax({
            type: "GET",
            url: "${base}/report/getCountParkCarByDeduration?parkId="+parkId+"&staTime="+startDate+"%2000:00&endTime="+endDate+"%2000:00&duration="+duration+"&queryType="+queryType,
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {

                    if(queryType == 1) {
                        queryByDay(data);
                    } else if(queryType ==2) {
                        queryByDays(data);
                    }

                }
            }
        });
    }

    function queryByDays(data) {
        var reportList = data.data;
        var dates = []; // 日期
        var minArray = []; // 时间间隔
        var serieArray = [];

        var index = 0;
        for(var item in reportList) {
            dates.push(reportList[item].date);
            var reportMap = reportList[item].reportData;

            for (var key in reportMap) {
                if(index == 0) {
                    minArray.push(key+"小时");
                }
            }
            index++;
        }

        for(var i in minArray) {
            var carNumArray = [];

            for(var item in reportList) {
                var reportMap = reportList[item].reportData;

                for (var key in reportMap) {
                    if(minArray[i] == key+"小时") {
                        carNumArray.push(reportMap[key]);
                    }
                }
            }

            var serie = {};
            serie.name=minArray[i];
            serie.type='bar';
            serie.stack='车辆';
            serie.label={
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            };
            serie.data =carNumArray;

            serieArray.push(serie);

        }


        var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: minArray
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: dates
            },
            series:serieArray
        };

        myChart.setOption(option);
    }

    function queryByDay(data) {
        var reportMap = data.data;
        var minArray = [];
        var valueArray = [];
        for (var key in reportMap) {
            minArray.push(key+"小时");
            valueArray.push(reportMap[key]);
        }
        console.log("---- key ---- " + minArray);

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '停车小时统计'
            },
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: ['停车小时统计']
            },
            xAxis: {
                data: minArray
            },
            yAxis: {},
            series: [{
                name: '车辆',
                type: 'bar',
                barWidth: '60%',
                data: valueArray
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


</script>

</body>

</html>